<template>
  <div class="detail-component">
	  <fieldset class="fieldset">基本信息</fieldset>
	  <div class="item">
	  	<span class="label">任务名称</span>
	  	<span class="value">{{detailData.title}}</span>
	  </div>
	  <div class="item">
	  	<span class="label">任务类型</span>
	  	<span class="value">{{detailData.typeName}}</span>
	  </div>
	 <!-- <div class="item">
	  	<span class="label">任务创建人</span>
	  	<span class="value">{{detailData.operatorName}}</span>
	  </div> -->
	  <div class="item">
	  	<span class="label">任务执行人</span>
	  	<span class="value">{{detailData.operatorName}}</span>
	  </div>
	  <div class="item">
	  	<span class="label">任务状态</span>
	  	<span class="value">{{detailData.statusName}}</span>
	  </div>
	  <div class="item">
	  	<span class="label">创建时间</span>
	  	<span class="value">{{detailData.createTime}}</span>
	  </div>
	  <div class="item">
	  	<span class="label">下发时间</span>
	  	<span class="value">{{detailData.publishTime}}</span>
	  </div>
	  <div class="item">
	  	<span class="label">打卡点位</span>
	  	<span class="value"><i class="el-icon-map-location" @click="openMap('point',detailData.dakaPoint)"></i></span>
	  </div>
	  <div class="item">
	  	<span class="label">任务描述</span>
	  	<span class="value">{{detailData.content}}</span>
	  </div>
	  <div class="item">
	  	<span class="label">巡查轨迹</span>
		  <!--  openMap('line')  showTrack -->
	  	<span class="value"><i class="el-icon-map-location" @click="showTrack"></i></span>
	  </div>
	  <div class="item">
	  	<span class="label">巡查里程(km)</span>
	  	<span class="value">{{detailData.mileage}}</span>
	  </div>
	  <div class="item">
	  	<span class="label">巡查时长</span>
	  	<span class="value">{{detailData.duration}}</span>
	  </div>
	  <fieldset class="fieldset">打卡列表</fieldset>
	  <div class="item span100">
	  	<!-- <span class="label"></span> -->
	  	<span class="value">
			<el-table	:data="detailData.patrolList" >
				<!-- <el-table-column  prop="type "  label="标志点"  align="left" ></el-table-column> -->
				<!-- <el-table-column  prop="duration "  label="时长(min)"  align="left" ></el-table-column> -->
				<!-- <el-table-column  prop="mileage"  label="里程(m)"  align="left"></el-table-column> -->
				<el-table-column  prop="type"  label="名称"  align="left">
					<span slot-scope="scope">
						<span v-if="scope.row.type=='start'">起点</span>
						<span v-else-if="scope.row.type=='end'">终点</span>
						<span v-else-if="scope.row.type=='mid1'">中点1</span>
						<span v-else="scope.row.type=='mid2'">中点2</span>
					</span>
				</el-table-column>
				<el-table-column  prop="punchPosition"  label="打卡位置"  align="left">
					<span slot-scope="scope" @click="openMap('point',scope.row.punchPosition)">
						{{scope.row.punchPosition}}<i class="icon el-icon-map-location"></i>
					</span>
				</el-table-column>
				<el-table-column  prop="punchTime"  label="打卡时间"  align="left"></el-table-column>
			  </el-table>
		</span>
	  </div>
	  <fieldset class="fieldset">隐患列表</fieldset>
	  <div class="item span100">
	  	<!-- <span class="label"></span> -->
	  	<span class="value">
			<el-table	:data="detailData.dangerList" stripe>
				<el-table-column  prop="title"  label="标题"  >
					<span class="cell" slot-scope="scope" :title="scope.row.title">
						{{scope.row.title}}
					</span>
				</el-table-column>
				<el-table-column  prop="address"  label="地址"  min-width="250">
					<span slot-scope="scope" @click="openMap('point',scope.row.position)"  :title="scope.row.address">
						{{scope.row.address}}<i class="icon el-icon-map-location"></i>
					</span>
				</el-table-column>
				<el-table-column  prop="description" type="expand" label="图文描述" width="100">
					<div class="cell" slot-scope="scope">
						<div style="margin-bottom: 10px;">{{scope.row.description || "暂无文字描述"}}</div>
						<el-image class="info file" v-for="url in scope.row.picUrl" :key="url" :preview-src-list="scope.row.picUrl" :src="url" fit="cover">
							<span slot="error" class=""></span>
						</el-image>
					</div>
				</el-table-column>
			  </el-table>
		</span>
	  </div>
	  <el-dialog :title="dialogTitle" :visible.sync="showDialog" append-to-body>
		  <lmap v-if="mapType=='point'" :showPoint="showPoint" :showLine="showLine" :isClick="false"></lmap>
		  <lmap v-if="mapType=='line'"></lmap>
	  </el-dialog>
  </div>
</template>
<script>
	import lmap from "@/components/map/LMapClick.vue"

	import axios from 'axios'
	export default{
		components:{lmap},
		props:{
			rowId:{
			  type:String,
			  default:"",
			  required:true,
			},
			taskTypeList:Array,
			taskStatusList:Array
		},
		data(){
			return{
				detailData:{},
				showDialog:false,
				dialogTitle:"打卡点位",//打卡点位 || 巡查轨迹
				mapType:"point",//point || line
				showPoint:[],
				showLine:null
			}
		},
		watch:{
			rowId(){
				this.getDetailData()
			}
		},
		methods:{
			getDetailData(){
				if(!this.rowId){
					return
				}
				this.$http.taskDetail({id:this.rowId})
				.then((res)=>{
					var data=res.data.data ||{};
					this.detailData=this.transData(data ||{})
				}).catch((err)=>{
					throw(err)
				})
			},

			transData(data){
				this.taskStatusList.forEach((item1)=>{
					if(data.status==item1.code){
						data.statusName=item1.name
					}
				})
				this.taskTypeList.forEach((item1)=>{
					if(data.type==item1.code){
						data.typeName=item1.name
					}
				})
				data.dakaPoint=[
					data.startPosition,
					data.endPosition,
					data.midOnePosition,
					data.midTwoPosition
				]

				data.dangerList && data.dangerList.forEach((item)=>{
					item.picUrl=item.picUrl && item.picUrl.split(",") ||[];
				})
				
				if(data.patrolList.length>0){
					let startTime="";
					let endTime="";
					let timeObj=null;
					startTime=Date.parse(data.patrolList[0].punchTime);
					endTime=Date.parse(data.patrolList[data.patrolList.length-1].punchTime);
					// data.patrolList.forEach((item)=>{
					// 	if(item.type=='start'){
					// 		startTime=Date.parse(item.punchTime);
					// 	}else if(item.type=='end'){
					// 		endTime=Date.parse(item.punchTime);
					// 	}
					// })
					timeObj=new Date(endTime-startTime);
					var hh=timeObj.getUTCHours()<10 ? "0"+timeObj.getUTCHours() :timeObj.getUTCHours();
					var mm=timeObj.getUTCMinutes()<10 ? "0"+timeObj.getUTCMinutes() :timeObj.getUTCMinutes();
					var ss=timeObj.getUTCSeconds()<10 ? "0"+timeObj.getUTCSeconds() :timeObj.getUTCSeconds();
					data.duration=hh +":"+mm+":"+ss;
				}else{
					data.duration="00:00:00";
				}
				
				return data;
			},

			openMap(type,point){
				if(type == 'point' && (!point ||  point.length == 0) ){
					this.$message.warning("没有点位可查看!")
					return false
				}
				this.mapType = type
			  this.showDialog = true
			  this.dialogTitle = type == 'point' ? '打卡点位' :'巡查轨迹';
			  this.$nextTick(()=>{
				  this.showLine = null;
				  this.showPoint=point;
			  })
			},
			//展示轨迹
			showTrack(){
				var trackFile = this.detailData.tackHisFile;
				if(trackFile){
					var fileUrl = trackFile.replace(/^http:\/\/\d+\.\d+\.\d+\.\d+:\d{2,4}/,"")
					this.$http.downloadFile(fileUrl,{responseType:'json'})
							.then(res => {
								var data  = res.data;
								var path = data.map(item=>{
									return [item.lat,item.lng]
								});
								this.showDialog = true
								this.dialogTitle = '巡查轨迹';
								this.$nextTick(()=>{
									this.showPoint = [];
									this.showLine = path;
								})
							}).catch((err) => {
						       var data  = err.data;
						       var path = data.map(item=>{
						       	return [item.lat,item.lng]
							   });

						this.showDialog = true
						this.dialogTitle = '巡查轨迹';
						this.$nextTick(()=>{
							this.showPoint = [];
							this.showLine = path;
						})
					})
				}else {
					this.$message.info("这个任务暂时没有巡查轨迹！");
					return;
				}
			}
		},
		created() {
			this.getDetailData()
		}

	}
</script>
<style scoped lang="scss">
.file{
	width:100px;
	height: 100px;
	margin-right: 10px;
}

.icon{
	padding:5px;
	cursor: pointer;
	&:hover{
		color:#23e9ff;
	}
}

/deep/ .el-table .el-table__expanded-cell .cell{
	white-space: initial;
}
</style>
